<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">   
        <head>
            <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
            <title>Weevil Prototype</title>
            <link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
            <link rel="stylesheet" type="text/css" href="./css/xtheme-aero.css" />
            <!-- common, all times required, imports -->
            <script src='wz_jsgraphics.js'></script>          
            <script src='mootools.js'></script>
            <script src='moocanvas.js'></script>
            <script src='draw2d.js'></script>

            <!-- demo specific imports -->
            <script src="ResizeImage.js"></script>
            <script src="Start.js"></script>
            <script src="End.js"></script>
            <script src="ContextmenuConnection.js"></script>
            <script src="MyInputPort.js"></script>
            <script src="MyOutputPort.js"></script>
            <script src="XMLSerializer_01.js"></script>

            <!-- use this imports if you whant the ExtJs native implementation
            
                <script type="text/javascript" src="./ext-base.js"></script> 
            -->

            <!-- use this imports if you prefere jquery
            
                <script type="text/javascript" src="./adapter/jquery/jquery.js"></script> 
                <script type="text/javascript" src="./adapter/jquery/jquery-plugins.js"></script>
                <script type="text/javascript" src="./adapter/jquery/ext-jquery-adapter.js"></script>
            -->

            <!-- use this import if you prefere prototype
            
                <script type="text/javascript" src="./adapter/prototype/prototype.js"></script>
                <script type="text/javascript" src="./adapter/prototype/effects.js"></script> 
                <script type="text/javascript" src="./adapter/prototype/scriptaculous.js"></script>
                <script type="text/javascript" src="./adapter/prototype/ext-prototype-adapter.js"></script>
            -->

            <!-- use this imports if you whant use the Yahoo utility methods -->
            
            <!--<script type="text/javascript" src="./adapter/yui/yui-utilities.js"></script>
            <script type="text/javascript" src="./adapter/yui/ext-yui-adapter.js"></script>-->


            <script type="text/javascript" src="ext-all.js"></script>


        </head>
        <body>
            <div id="toolbar"></div>
            <div id="obj2">
                empty at the moment....
            </div>
            <div id="obj1">
                <center>
                    <br/>
                    <br/>
                    <img src="Start.png" id="dragMe" style="cursor:move"/>
                    <br/>
                    <br/>
                    <br/>
                    <img src="End.png"   id="dragMe2" style="cursor:move"/>
                </center>
            </div>

            <div id="center1" class="x-layout-active-content">
                <div id="paintarea" style="position:relative;width:3000px;height:3000px;" >
                </div>
            </div>

            <div id="debug">
            </div>

            <script>
                function debug(msg)
                {
                    var console = document.getElementById("debug");
                    console.innerHTML=console.innerHTML+"<br>"+msg;
                }
                /**********************************************************************************
                 * 
                 * Do the Draw2D Stuff
                 *
                 **********************************************************************************/
                var workflow  = new draw2d.Workflow("paintarea");
                //  workflow.setEnableSmoothFigureHandling(true);

                // Add the image node to the canvas
                //
                //var startObj = new draw2d.ResizeImage("Image.gif");
                //workflow.addFigure(startObj, 200,300);


                // Add an simple annotation to the canvas
                //
                // var annotation = new draw2d.Annotation("NOTE: Drag&Drop the red port to the blue port to create a connection. Use the connection context menu to switch the router implementation.");
                // annotation.setDimension(300,70);
                // workflow.addFigure(annotation,20,50);

                // var annotation = new draw2d.Annotation("NOTE: Drag&Drop the objects from the left hand tool palette to the canvas to insert a new object.");
                //annotation.setDimension(300,70);
                //workflow.addFigure(annotation,20,150);

                //var annotation = new draw2d.Annotation("NOTE: Test the context menu of the blue connections!!!.");
                //annotation.setDimension(300,70);
                //workflow.addFigure(annotation,20,250);


                // Add the start node to the canvas
                //
                var startObj = new draw2d.Start();
                workflow.addFigure(startObj, 450,200);

                // Add the end node to the canvas
                //
                var endObj   = new draw2d.End();
                workflow.addFigure(endObj,600,300);

                var c = new draw2d.Connection();
                c.setRouter(new draw2d.BezierConnectionRouter());
                c.setSource(startObj.getPort("output"));
                c.setTarget(endObj.getPort("input"));
                c.setTargetDecorator(new draw2d.ArrowConnectionDecorator());
                c.setLineWidth(2);
                workflow.addFigure(c);

                //alert(new draw2d.XMLSerializer_01().toXML(workflow.getDocument()));

                //debug("start");
                /**********************************************************************************
                 * 
                 * Do the Ext (Yahoo UI) Stuff
                 *
                 **********************************************************************************/
                var center = new Ext.ContentPanel('center1', {width:100, height:200});
                Example = function(){
                    var layout;
                    return {
                        init : function(){
                            layout = new Ext.BorderLayout(document.body, {
                                west: {
                                    split:true,
                                    initialSize: 202,
                                    minSize: 175,
                                    maxSize: 400,
                                    titlebar: true,
                                    collapsible: true,
                                    autoScroll:true,
                                    animate: true
                                },
                                north: {
                                    initialSize: 30,
                                    split:false,
                                    titlebar: false,
                                    collapsible: false,
                                    animate: false
                                },
                                south: {
                                    initialSize: 130,
                                    split:false,
                                    titlebar: true,
                                    collapsible: true,
                                    autoScroll:true,
                                    animate: true
                                },
                                center: {
                                    titlebar: true,
                                    autoScroll:true,
                                    fitToFrame:true
                                }
                            });

                            layout.beginUpdate();
                            layout.add('south', new Ext.ContentPanel('debug',    {title: 'Debug Console'}));
                            layout.add('north', new Ext.ContentPanel('toolbar',    {title: 'South'}));
                            layout.add('west',  new Ext.ContentPanel('obj2', {title: 'Object Type 2'}));
                            layout.add('west',  new Ext.ContentPanel('obj1', {title: 'Object Type 1'}));
                            layout.add('center',center);
                            layout.endUpdate();
                            workflow.scrollArea = document.getElementById("center1").parentNode;
                            //               var dragsource=new Ext.dd.DragSource("dragMe", {ddGroup:'TreeDD',dragData:{name: "Start"}}); 
                            //               var dragsource=new Ext.dd.DragSource("dragMe2", {ddGroup:'TreeDD',dragData:{name: "End"}}); 
                            var dragsource=new Ext.dd.DragSource("dragMe", {ddGroup:'TreeDD',dragData:{name: draw2d.Start.prototype.type}}); 
                            var dragsource=new Ext.dd.DragSource("dragMe2", {ddGroup:'TreeDD',dragData:{name: draw2d.End.prototype.type}}); 
                            var droptarget=new Ext.dd.DropTarget("center1",{ddGroup:'TreeDD'});
                            droptarget.notifyDrop=function(dd, e, data)
                            {
                                if(data.name)
                                {
                                    var xOffset    = workflow.getAbsoluteX();
                                    var yOffset    = workflow.getAbsoluteY();
                                    var scrollLeft = workflow.getScrollLeft();
                                    var scrollTop  = workflow.getScrollTop();

                                    workflow.addFigure(eval("new "+data.name+"()"),e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
                                    return true;
                                }
                            }
                        }

                    };

                }();
                Ext.EventManager.onDocumentReady(Example.init, Example, true);

                var simpleToolbar = new Ext.Toolbar('toolbar'); 
                var tb1 = new Ext.ToolbarButton('button1');
                tb1.setText("File");
                var tb2 = new Ext.ToolbarButton('button2');
                tb2.setText("Edit");
                var tb3 = new Ext.ToolbarButton('button3');
                tb3.setText("Generate XML");
                tb3.setHandler(onButtonClick);
                //tb3.execute=function(x,y){alert(new draw2d.XMLSerializer_01().toXML(this.palette.workflow.getDocument()));};
                simpleToolbar.addButton(tb1);
                simpleToolbar.addButton(tb2);
                simpleToolbar.addButton(tb3);

                function onButtonClick(btn){
                    //alert("dad");
                    //debug("dsdsdf\ndfdg");
                    var dd = new draw2d.XMLSerializer_01().toXML(workflow.getDocument());
                    debug(dd);
                };


            </script>
        </body>
    </html>
